<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="A simple jQuery image cropping plugin.">
    <meta name="author" content="Chen Fengyuan">
    <title>Cropper</title>
    <script src="../../js/mui.min.js"></script>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cropper.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>

<!-- Content -->
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <!-- <h3>Demo:</h3> -->
            <div class="img-container">
                <img id="image" src="../../css/registLogin/arrow.jpg" alt="Picture">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 docs-buttons">
            <button id="cutter" type="button" class="btn btn-success">剪裁</button>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://fengyuanchen.github.io/js/common.js"></script>
<script src="js/cropper.js"></script>
<!--<script src="js/main.js"></script>-->

<script type="text/javascript">
    mui.plusReady(function () {

        var $image = $('#image');
        var options = {
            aspectRatio: 1 / 1,
            crop: function (e) {
            }
        };

        // Cropper
        $image.cropper(options);

        $("#cutter").on('click', function () {
            var cropper = $image.data('cropper');
            var result;

            result = $image.cropper("getCroppedCanvas");

            if (result) {
                var base64Url = result.toDataURL();
                console.log(base64Url);
            }
        })

    });
</script>

</body>

</html>